<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
  <html lang="en" class="app">
    
    <head>
      <%@include file="/common/common.jspf" %>
      	<style type="text/css">
      		.bg-dark a {
			    color: #428bca;
			}
      		.navbar-brand {
      			font-size: 15px;
      		}
      	</style>
        <script type="text/javascript">
          $(function() {
            //修改时间2015年10月13日14:32:57
            //修改在手机上点击菜单后菜单不关闭问题
            var winwidth = $("body").width();
            if (winwidth < 770) {
              $("#nav ul.lt li").click(function() {
                $("#nav").removeClass("nav-off-screen");
              });
            }
            var tb = $("#loadhtml");
            tb.html(CommnUtil.loadingImg());
            tb.load(rootPath + "/welcome.jsp");
            $("[nav-n]").each(function() {
              $(this).bind("click",
              function() {
                var nav = $(this).attr("nav-n");
                var sn = nav.split(",");
                var html = '<li><i class="fa fa-home"></i>';
                html += '<a href="index.shtml">Home</a></li>';
                for (var i = 0; i < 2; i++) {
                  html += '<li><a href="javascript:void(0)">' + sn[i] + '</a></li>';
                }
                $("#topli").html(html);
                var tb = $("#loadhtml");
                tb.html(CommnUtil.loadingImg());
                tb.load(rootPath + sn[2]);
              });
            });
            
            $("#navuser").click(function(){
            	if($(this).hasClass("open")) {
            		$(this).removeClass("open");
            	} else {
            		$(this).addClass("open");
            	}
            });
          });

          function updatePasswordLayer() {
            //加载层
            var index = layer.load(0, {
              shade: false
            }); 
            //0代表加载的风格，支持0-2
            //iframe层-禁滚动条
            layer.open({
              type: 2,
              title: '修改密码',
              area: ['550px', '305px'],
              skin: 'layui-layer-rim',
              //加上边框
              content: [rootPath + '/user/updatePassword.shtml', 'no']
            });
            //关闭加载效果
            layer.close(index);
          }
          function updatePersonal(){
        	  //加载层
              var index = layer.load(0, {
                shade: false
              }); 
              //0代表加载的风格，支持0-2
              //iframe层-禁滚动条
              layer.open({
                type: 2,
                title: '个人信息',
                area: ['550px', '305px'],
                skin: 'layui-layer-rim',
                //加上边框
                content: [rootPath + '/user/changePersonal.shtml', 'no']
              });
              //关闭加载效果
              layer.close(index);
          }
        </script>
    </head>
    
    <body class="" style="">
      <section class="vbox">
        <header class="bg-dark dk header navbar navbar-fixed-top-xs">
          <div class="navbar-header aside-md">
            <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open"
            data-target="#nav,html">
              <i class="fa fa-bars">
              </i>
            </a>
            <a href="index.shtml#" class="navbar-brand" data-toggle="fullscreen">
              <%-- <img src="${ctx}/notebook/notebook_files/logo.png" class="m-r-sm">
              &nbsp;&nbsp; --%>
              ${userFormMap.areaName}绿色伙伴欢迎您!
            </a>
            <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
              <i class="fa fa-cog">
              </i>
            </a>
          </div>
          <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
            <li class="dropdown" id="navuser">
              <a href="index.html#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="thumb-sm avatar pull-left">
                	<c:if test="${userFormMap.images==null}">
                  		<img src="${ctx}/notebook/notebook_files/avatar.png">
                  	</c:if>
                  	<c:if test="${userFormMap.images!=null}">
                  		<img src="${ctx}/upload/headImage/${userFormMap.images}">
                  	</c:if>
                </span>
                ${userFormMap.userName}
                <b class="caret">
                </b>
              </a>
              <ul class="dropdown-menu animated fadeInRight">
                <span class="arrow top">
                </span>
                <li>
                  <a href="#" onclick="javascript:updatePasswordLayer();">密码修改</a>
                </li>
                <li>
                  <a href="#" onclick="javascript:updatePersonal();">个人信息</a>
                </li>
                <li class="divider">
                </li>
                <li>
                  <a href="logout.shtml">退出系统</a>
                </li>
              </ul>
            </li>
          </ul>
        </header>
        <section>
          <section class="hbox stretch">
            <!-- .aside -->
            <aside class="bg-dark lter aside-md hidden-print" id="nav">
              <section class="vbox">
                <section class="w-f scrollable">
                  <div class="slim-scroll" data-height="auto" data-disable-fade-out="true"
                  data-distance="0" data-size="5px" data-color="#333333">
                    <!-- nav -->
                    <nav class="nav-primary">
                      <ul class="nav lt">
                        <c:forEach var="key" items="${list}" varStatus="s">
                          <!-- <li class="active"> 某一项展开-->
                          <li <c:if test="${s.index==0}"> class="active" </c:if> >
                            <a href="javascript:void(0)" <c:if test="${s.index==0}"> class="active" </c:if> >
                              <i class="fa ${empty key.icon ? 'fa-dashboard' : key.icon} icon">
                                <b class="${s.index % 2 == 0 ? 'bg-warning' : 'bg-danger'}"></b>
                              </i>
                              <span class="pull-right">
                                <i class="fa fa-angle-down text"></i>
                                <i class="fa fa-angle-up text-active"></i>
                              </span>
                              <span>
                                ${key.name}
                              </span>
                            </a>
                            <ul class="nav lt">
                              <c:forEach var="kc" items="${key.children}">
                                <li class="active">
                                  <a href="javascript:void(0)" class="active" nav-n="${key.name},${kc.name},${kc.resUrl}?id=${kc.id}">
                                    <i class="fa ${empty kc.icon ? 'fa-angle-right' : kc.icon } icon"></i>
                                    <span>${kc.name}</span>
                                  </a>
                                </li>
                              </c:forEach>
                            </ul>
                          </li>
                        </c:forEach>
                      </ul>
                    </nav>
                    <!-- / nav -->
                  </div>
                </section>
                <footer class="footer lt hidden-xs b-t b-dark">
                  <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-dark btn-icon">
                    <i class="fa fa-angle-left text">
                    </i>
                    <i class="fa fa-angle-right text-active">
                    </i>
                  </a>
                </footer>
              </section>
            </aside>
            <!-- /.aside -->
            <section id="content">
              <section id="id_vbox" class="vbox">
                <ul class="breadcrumb no-border no-radius b-b b-light" id="topli">
                </ul>
                <section class="scrollable" style="margin-top: 35px;">
                  <div id="loadhtml">
                  </div>
                </section>
              </section>
            </section>
            <aside class="bg-light lter b-l aside-md hide" id="notes">
              <div class="wrapper">
                Notification
              </div>
            </aside>
          </section>
        </section>
      </section>
    </body>
  
  </html>